import React from 'react'
import ReactDOM from 'react-dom'
import * as SysRoleAction  from '../../actions/SysRoleAction';
import { connect }  from 'react-redux';

import SysRoleTools from './SysRoleTools'
import SysRoleList from './SysRoleList'
import SysRoleEdit from './SysRoleEdit'
import SysRoleMenuEdit from './SysRoleMenuEdit'
import SysBindList from './SysBindList'



class SysRoleBody extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeData: {},
    }
  }

  componentDidMount() {
    var self = this;
    var data = { name : "" };
    this.$modal = $(ReactDOM.findDOMNode(this.refs.SysRoleEdit))
    this.$menuModal = $(ReactDOM.findDOMNode(this.refs.SysRoleMenuEdit))
    this.$bindModal = $(ReactDOM.findDOMNode(this.refs.SysBindList))
    this.props.dispatch(
      SysRoleAction.loadSysRoleDataAsync(data)
    )
  }

  componentDidUpdate() {
    if (this.props.data === 403) {
      window.location.href = 'login'
    }
  }

  onCreateClick() {
    this.setState({
      activeData: {},
      hideBtn: false
    })
    // $('.role-footer').removeClass('f-dn');
    this.$modal.modal("show")
  }

  onDataSearch(data){
    this.props.dispatch(
      SysRoleAction.loadSysRoleDataAsync(data)
    )
    this.setState({
      activeData: data
    })
  }

  onDataCreate(data) {
    this.props.dispatch(
      SysRoleAction.createSysRoleDataAsync(data)
    )
    this.setState({
      activeData: data
    })
    this.$modal.modal("hide");
  }

  onDataUpdate(data) {
    this.props.dispatch(
      SysRoleAction.editSysRoleDataAsync(data)
    )
    this.setState({
      activeData: data
    })
    // this.$modal.modal("hide");
  }


  onEditClick(index) {
    if (index < this.props.data.length) {
      this.setState({
        activeData: this.props.data[index],
        hideBtn: true
      })
      // $('.role-footer').addClass('f-dn');
      this.$modal.modal("show")
    }
  }

  onMenuClick(index) {
    if (index < this.props.data.length) {
      this.setState({
        activeData: this.props.data[index]
      })
      this.$menuModal.modal("show")
    }
  }

  onBindClick(id) {
    this.setState({
      role_id: id
    })
    this.$bindModal.modal("show")
  }


  onDeleteClick(index) {
    var data = this.props.data[index];
    this.props.dispatch(
      SysRoleAction.deleteSysRoleDataAsync(data.id)
    )
  }

  render() {
    var self = this;

    return (
      <div className="content-body sys-role-content-body" >
        <SysRoleTools
          onCreateClick={this.onCreateClick.bind(self)}
          onDataSearch={this.onDataSearch.bind(self)}/>
        <SysRoleList
          data = {this.props.data}
          onDeleteClick = {this.onDeleteClick.bind(self)}
          onEditClick = {this.onEditClick.bind(self)}
          onRoleMenuClick = {this.onMenuClick.bind(self)}
          onBindClick = {this.onBindClick.bind(self)}/>
        <SysRoleEdit
          ref = "SysRoleEdit"
          hideBtn = {this.state.hideBtn}
          data = {this.state.activeData}
          isEdit = {this.state.activeData.id != undefined}
          onDataUpdate = {this.onDataUpdate.bind(self)}
          onDataCreate = {this.onDataCreate.bind(self)}/>
        <SysRoleMenuEdit
          ref = "SysRoleMenuEdit"
          data = {this.state.activeData}
          />
        <SysBindList
          role_id = {this.state.role_id}
          ref = "SysBindList"
          data = {this.state.activeData}
          />
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return { data: state.sysRoles }
}

export default connect(mapStateToProps)(SysRoleBody);
